<template>
  <div class="authentication">
    <!-- <x-header :left-options="{backText: ''}">实名认证</x-header> -->
    <top :text="'实名认证'"></top>
    <div style="height: 46px;border-bottom: 1px solid #f6f6f6"></div>
    <div>
      <div class="authenticationMsg fr" style="background: #fff">
        <span>姓名</span>
        <span style="color:red">*</span>
        <input placeholder="请输入姓名" v-model="authenticationName">
      </div>
      <div class="authenticationMsg fr" style="background: #fff">
        <span>身份证号</span>
        <span style="color:red">*</span>
        <input placeholder="请输入身份证号" v-model="cardNum" >
      </div>
      <div class="authenticationMsg" style="background: #fff">
        <span>微信</span>
        <input placeholder="请输入本人微信号" v-model="wxbNum">
      </div>
      <div class="authenticationMsg fr" style="background: #fff">
        <span>支付宝账号</span>
        <input placeholder="请输入本人实名支付宝账号" v-model="zfbNum">
      </div>
      <div class="authenticationMsg fr" style="background: #fff">
        <span>邮箱账号</span>
        <input placeholder="请输入邮箱号" v-model="yxNum">
      </div>
      <div class="authenticationMsg fr" style="background: #fff">
        <span>QQ</span>
        <input placeholder="请输入QQ号" v-model="qqNum">
      </div>
      <div class="confim" @click="confimBtn">
        <span>确认</span>
      </div>
    </div>
  </div>
</template>
<script>
  import { XHeader } from 'vux'
  import tips from '../../service/tips.js'
  import http from '../../service/http.js'
  import Top from '../../components/common/top.vue'
  export default {
    data() {
      return {
        user: {},
        authenticationName: "",
        cardNum: "",
        zfbNum: "",
        yxNum: "",
        qqNum: "",
        wxbNum: "",
        isAuth:"",//判断是否实名认证过
      }
    },
    mounted() {
      this.getMe();
    },
    methods: {
      getMe() {
        http.get('/user/getMe').then((res) => {
          if (res.data.status == 200) {
            this.isAuth=true;
            this.authenticationName = res.data.body.name;
            this.cardNum = res.data.body.idcard;
            this.zfbNum = res.data.body.zhifuPay;
            this.yxNum = res.data.body.email;
            this.qqNum = res.data.body.qq;
            this.wxbNum = res.data.body.weixin;
          }else{
            this.isAuth=false;
          }
        }).catch((res)=>{
          this.isAuth=false;
        })

      },
      confimBtn() {
        if (!this.authenticationName) {
          tips.tips("请输入姓名");
          return false;
        }
        if (!this.cardNum) {
          tips.tips("请输入身份证号");
          return false;
        }
        if (!this.wxbNum) {
          tips.tips("请输入微信号");
          return false;
        }
        if (!this.zfbNum) {
          tips.tips("请输入本人实名认证支付宝账号");
          return false;
        }
        if (!this.yxNum) {
          tips.tips("请输入邮箱");
          return false;
        }
        if (!this.qqNum) {
          tips.tips("请输入QQ号");
          return false;
        }
        http.put('/user/verify', {
          name: this.authenticationName,
          zhifuPay: this.zfbNum,
          email: this.yxNum,
          qq: this.qqNum,
          idcard: this.cardNum,
          weixin: this.wxbNum,
        }).then((res) => {
          if (res.data.status == '200') {
            tips.tips("实名认证成功");
          } else {
            tips.tips(res.data.msg);
          }
        }).catch(function (error) {
          tips.tips(error.msg);
        });
      }
    },
    components: {
      XHeader,
      Top
    }
  }
</script>
<style lang="less" scoped>
  body{
    background: #fff;
  }
  .authentication .vux-header {
    background: #fff;
  }

  .authentication .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  .fa {
    position: absolute;
  }

  .fr {
    position: relative;
  }

  .r10 {
    right: 10px;
  }

  .t0 {
    top: 0px;
  }

  .authenticationMsg {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #f6f6f6;
    padding-left: 15px;
    position: relative;
    input {
      position: absolute;
      height: 40px;
      line-height: 40px;
      display: blodk;
      right: 15px;
      border: none;
      border-style: none;
      outline: none;
      text-align: right;
      width: 65%;
    }
  }

  .authentication .confim {
    padding: 0px 15px;
    margin-top: 50px;
    span {
      display: block;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: linear-gradient(left, #fedb30, #fe9f0a);
      background-image: linear-gradient(-135deg, #fedb30 0%, #fe9f0a 100%);
      border-radius: 25px;
      color: #fff;
    }
  }

  .authentication .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #333;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }
</style>